<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('收货地址')"></navbar>
		<view class=" ">
			<block v-for="(item,index) in datalist">
				<view class="bg-white br-rd-10  mg-5">
					<u-cell>
						<view slot="title" class="b font-bold">
							<u--text :text="item.name"></u--text>

							<!-- 	<u-tag v-if="item.moren==1" class="pd-left-10 pd-right-10" size="mini"
								:text="item.moren==1?$t('默认'):''"></u-tag> -->
						</view>
						<view slot="label" class=" mg-bottom-10">
							<u--text type="info" size='12' :text="item.address+' '+item.addressInfo"></u--text>
						</view>
						<view slot="value">
							<u--text size="12" :text="item.phoneNumber"></u--text>
							<!-- 	<navigator :url="'./edit?id='+item.id">
								<iconfont icon="icon-xiugai" size="24" />
							</navigator>
							<view @click="byDelete(item.id)" class="mg-top-10">
								<iconfont icon="icon-shanchu" size="24" />
							</view> -->

						</view>
					</u-cell>
					<view class="mg-top-10 pd-right-10 pd-left-10 flex2 pd-bottom-10">
						<view class="flex2">
							<navigator class="pd-left-10 pd-right-10 flex2 ftc" :url="'./edit?id='+item.id">
								<iconfont icon="icon-xiugai" color="#909399" size="18" /><text>{{$t("编辑")}}</text>
							</navigator>
							<view @click="byDelete(item.id)" class="pd-left-10 pd-right-10 flex2 ftc">
								<iconfont icon="icon-shanchu" color="#909399" size="18" /><text>{{$t("删除")}}</text>
							</view>
						</view>
						<view>
							<u-tag v-if="item.moren==1" class="pd-left-10 pd-right-10" size="mini"
								:text="item.moren==1?$t('默认'):''"></u-tag>
						</view>

					</view>
				</view>
			</block>

		</view>
		<view>
			<view class="mg-top-10 pd-20 flex-btn">
				<navigator url="./edit">
					<u-button shape="circle" :color="color.primary" type="primary"
						icon="map-fill">{{$t('添加地址')}}</u-button>
				</navigator>

				<u-button @click="chooseLocation" shape="circle" type="success"
					icon="weixin-fill">{{$t('微信地址')}}</u-button>

			</view>
		</view>
	</b-layout-index>

</template>

<script>
	import {
		getFindByAddressList,
		findByDelete,
		editAddress
	} from '@/api/user.js'
	export default {
		data() {
			return {
				datalist: [],
				form: {
					address: "",
					addressInfo: "",
					addressName: "",

					id: 0,
					latitude: 0,
					longitude: 0,
					name: "",
					phoneNumber: "",
					postNumber: "",
					moren: 0

				}
			}
		},
		onShow: function() {
			this.getData()
		},
		methods: {
			getData: function() {
				var the = this;
				getFindByAddressList().then(res => {
					console.log(res)
					the.datalist = res
				})
			},
			byDelete: function(id) {
				var the = this;

				findByDelete(id).then(res => {
					the.getData()
				})
			},
			openChooseAddress: function() {
				console.log("RRRRRRRR----------------")
				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
				// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
				uni.chooseAddress({
					success(res) {
						console.log(res.userName)
						console.log(res.postalCode)
						console.log(res.provinceName)
						console.log(res.cityName)
						console.log(res.countyName)
						console.log(res.detailInfo)
						console.log(res.nationalCode)
						console.log(res.telNumber)
					}
				})
				/* 	uni.chooseAddress({
						success(res) {
							console.log(res)
						},fail(e) {
							console.log(e)
						}
					}) */
			},
			chooseLocation: function() {
				var the = this
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.address']) {
							uni.authorize({
								scope: 'scope.address',
								success() {
									the.getLocation();
								},
								fail() {
									uni.showModal({
										title: the.$t('提示'),
										content: this.$t('您需要授权位置信息才能使用此功能'),
										showCancel: false
									});
								}
							});
						} else {
							the.getLocation();
						}
					}
				});
			},

			getLocation: function() {
				var the = this;
				uni.chooseAddress({
					success: function(res) {
						console.log('选择的地址信息：', res);
						var form = {
							address: res.provinceName + " " + res.cityName,
							addressInfo: res.countyName + " " + res.detailInfo,
							addressName: res.streetName,
							name: res.userName,
							phoneNumber: res.telNumber,
							postNumber: res.postalCode,
							moren: 1,
							id: 0,
							latitude: 0,
							longitude: 0
						}
						editAddress(form).then(r => {
							the.getData()
						})
					},
					fail: function(res) {
						console.log('选择地址失败：', res);
					}
				});
			},
		}
	}
</script>

<style>
	.b {

		display: flex;

	}

	.flex-btn {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		justify-content: space-between;
	}

	.flex2 {
		display: flex;

		justify-content: space-between;
	}

	.ftc {
		color: #909399;
	}
</style>